<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 包含 bootstrap 样式表 -->
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
    <!-- 可选: 包含 jQuery 库 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 可选: 合并了 Bootstrap JavaScript 插件 -->
    <script src="https://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    <style>
        .row {
            margin-bottom: 30px;
            margin-right: 0 !important;
            margin-left: 0 !important;
        }

        .form-group {
            margin-bottom: 30px;
        }

        .submit {
            margin-left: 30px;
        }

        .modal-btns {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="navbar-header">
            <ol class="breadcrumb">
                <li><a href="${pageContext.request.contextPath}/select/outlogin" class="btn btn-primary btn-sm"
                       role="button"><span class="glyphicon glyphicon-home pull-right" aria-hidden="true"></span>&nbsp;&nbsp;
                    主&nbsp;&nbsp; 页</a></li>
                <li class="active">文章类管理</li>
                <li><a href="${pageContext.request.contextPath}/select/wenzhang">文章管理</a></li>
                <li class="active">文章添加</li>
            </ol>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <!-- 右为普通导航条 -->
            <!--<a class="btn btn-default" href="#" role="button" id = "msg">Link</a>-->
            <ul class="nav navbar-nav navbar-right">
                <!--<li><a href="#">当前用户:<span class="badge">小明</span></a></li>-->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">当前用户:<span class="badge">${msg}</span><span
                            class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">修改密码</a></li>
                        <li><a href="#">个人详情</a></li>
                    </ul>
                </li>
                <li>
                    <a href="${applicationScope.basePath}/user/login_out">
                        <span class="glyphicon glyphicon glyphicon-lock" aria-hidden="true"></span>注销
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2">
            <form class="form-horizontal" method="post" enctype="multipart/form-data">
                <!-- 文章标题-->
                <div class="form-group">
                    <label for="news_title" class="col-lg-2 control-label">标&nbsp;&nbsp;&nbsp;&nbsp;题
                        &nbsp;<span class="glyphicon glyphicon-star" aria-hidden="true"
                                    style="color: red!important;"></span>
                    </label>
                    <div class="col-lg-10">
                        <input type="text" class="form-control" id="news_title" name="newsTitle"
                               placeholder="输入标题">
                        <span id="newsTitleMessage"></span>
                    </div>

                </div>

                <div class="form-group">
                    <label for="newsSummary" class="col-lg-2 control-label">简&nbsp;&nbsp;&nbsp;&nbsp;介</label>
                    <div class="col-lg-10">
                        <input type="text" class="form-control" id="newsSummary" name="newsSummary"
                               placeholder="输入简介">
                    </div>
                </div>

                <!-- 演示初始化下拉列表的功能 -->
                <div class="form-group">
                    <label for="newsState" class="col-lg-2 control-label">文章类型</label>
                    <div class="col-lg-10">
                        <select class="form-control" name="typeId" id="newsState">
                            <c:forEach items="${types}" var="type">
                                <option value="${type.typeId}">${type.typeName}</option>
                            </c:forEach>
                            <%--
                            <option value="ca4331e2-fad7-4a05-a094-d8d0c5e445ea">行业新闻</option>
                            <option value="ererer">大事件</option>
                            <option value="yuess">行业介绍</option>--%>
                        </select>
                    </div>
                </div>

                <!-- 演示图片上传功能 -->
                <div class="form-group">
                    <label class="control-label col-lg-2" for="file">图&nbsp;&nbsp;&nbsp;&nbsp;片</label>
                    <div class="col-lg-10">
                        <input type="file" id="file" name="file" multiple>
                        <div>
                            <img  id="preview" style="width: 100px;height: 100px;">
                            <span id="fileMassage"></span>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-lg-2" for="content">文章内容
                        &nbsp;<span class="glyphicon glyphicon-star" aria-hidden="true"
                                    style="color: red!important;"></span>
                    </label>
                    <div class="col-lg-10">
                        <textarea rows="30" cols="40" name="newsContent" id="content" class="form-control"
                                  style="resize: none"></textarea>
                        <span id="newsContentMessage"></span>
                    </div>
                </div>

                <%--<div class="modal-btns">--%>
                <div class="form-group">
                    <div class="col-lg-3 col-lg-offset-6">
                        <button type="button" class="btn btn-primary" id="button">添 加</button>
                    </div>
                </div>
                <%--</div>--%>
            </form>
        </div>
    </div>
</div>
<script>
    let titleFlag = false;
    let contentFlag=false
    function showMessage(slecteor,message){
        $(slecteor).html(message).css("color","red");
    }
    function showMessage2(slecteor,message){
        $(slecteor).html(message).css("color","green");
    }
    $("#news_title").on("blur",function (){
        let val = $(this).val().trim();
            if (val===""){
                showMessage("#newsTitleMessage","标题不能为空");
            }else if(!/^[a-zA-Z0-9\u4E00-\u9FFF]{4,9}$/.test(val)){
                showMessage("#newsTitleMessage","标题不满足规则!");
            }else {
                $.ajax({
                    url:"${pageContext.request.contextPath}/select/check_is_exist",
                    data:{"title": val},
                    type:"get",
                    dataType:"json",
                    success:function (result){
                        if(result){
                            showMessage2("#newsTitleMessage","标题符合规则")
                            titleFlag=true
                        }else {
                            showMessage("#newsTitleMessage","标题已经存在")
                            titleFlag=false
                        }
                    }
                })
            }
            return false;
    })
    $("#news_title").on("focus",function (){
        showMessage("#newsTitleMessage","");
        titleFlag=false
    })


    $("#content").on("blur",function (){
        let val = $(this).val().trim();
        if(val===""){
            showMessage("#newsContentMessage","内容不为空");
        }else {
            showMessage2("#newsContentMessage","内容符合规则");
            contentFlag=true
        }
    })
    $("#content").on("focus",function (){
        showMessage("#newsContentMessage","");
        contentFlag=false
    })
    $("#file").on("focus",function (){
        showMessage("#fileMassage","");
    })

    $("button[type='button']").click(function (){
        if(titleFlag&&contentFlag){
            let formDate =new FormData($("form")[0]);
            //files[0]为只传一张，如果为多张，得用数组传递
            formDate.append("file",$("#file")[0].files[0]);
            $.ajax({
               url: "${pageContext.request.contextPath}/select/addAjax",
               type: "post",
               data: formDate,
               caches:false,
               async :false,
               contentType: false,
               processData: false,
               success:function (ajaxMassage){
                   console.log(ajaxMassage)
                  if(ajaxMassage.success){
                      alert("添加成功")
                      window.location.href="${pageContext.request.contextPath}/select/wenzhang"
                  }else {
                      switch (ajaxMassage.code){
                          case 100:
                              $.each(ajaxMassage.massageMap.errors,function (i,n){
                                  showMessage("#"+n.field+"Message",n.defaultMessage);
                              })
                              break;
                          case 500:
                              alert(ajaxMassage.massage)
                              break;
                          default:
                              showMessage("#fileMassage",ajaxMassage.massage);
                              break;

                      }
                  }
               }
           })
        }else {
            alert("请确保你得文章符合规则");
        }
        return false;
    })
    // 选择文件上传控件
    var file = document.querySelector('#file');
    // 选择图片控件
    var preview = document.querySelector('#preview');
    // 当用户选择完文件以后
    file.onchange = function(){
        // 创建文件读取对象
        var reader = new FileReader();
        // 在文件上传控件中有一个 files 属性，代表用户选择的文件列表，files[0] 表示第一个文件
        // 如果加了 multiple 属性上传多个文件的话，files[1] 就是第二个文件，files[2] 就是第三个文件 ...
        // 读取文件
        reader.readAsDataURL(this.files[0]);
        // 监听onload事件
        reader.onload = function(){
            // 将文件读取的结果显示在页面中
            preview.src=reader.result;

        }
    }
</script>
</body>
</html>